<template>
    <div class="related-apps">
        <div class="title">Related Apps</div>
        <div class="apps-list">
            <a class="app-item" :href="getDetailUrl(item)" v-for="(item, index) in relatedApps" :key="index" @click="handleClickApp('Related Apps', item.name)">
                <img class="img-icon" :src="item.icon" />
                <div class="info">
                    <div class="name">{{  item.name  }}</div>
                    <div class="category">{{  item.category  }}</div>
                    <div class="rating">
                        {{ item.rating }}
                        <div class="icon">★</div>
                    </div>
                </div>
                <div class="get">GET</div>
            </a>
        </div>
    </div>
</template>

<script setup>
import { homeParams } from '~/utils/homeParams'
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
    category: {
        type: String,
        required: true
    }
})

const isMobile = ref(false)
const { data: apps } = await useFetch(`/api/related-apps/${props.category}`);
const detailUrls = ref(new Map())

const relatedApps = computed(() => {
    return isMobile.value ? apps.value?.slice(0, 4) : apps.value
})

const generateDetailUrls = () => {
    if (apps.value) {
        apps.value.forEach(item => {
            const queryParams = {
                type: 'apps',
                slug: item.slug,
                ...homeParams()
            }
            detailUrls.value.set(item.slug, `/details?${new URLSearchParams(queryParams).toString()}`)
        })
    }
}

onMounted(() => {
    isMobile.value = window.innerWidth < 768
    generateDetailUrls()
})

const getDetailUrl = (item) => {
    return detailUrls.value.get(item.slug)
}

const handleClickApp = (type, name) => {
    logEvent('Click_APP', {
        Subzone: type,
        App: name,
    })
}
</script>

<style scoped lang="scss">
.related-apps {
    margin-top: 1rem;
    .title {
        @include title;
    }
    .apps-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
        margin-top: 1rem;
        @media screen and (max-width: 768px) {
            grid-template-columns: 1fr;
        }
        .app-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
            color: #000;
            .img-icon {
                width: 4.5rem;
                height: 4.5rem;
                border-radius: 1rem;
                object-fit: cover;
                background-image: url('/img/default.png');
                background-size: 4.5rem 4.5rem;
                background-position: center;
            }
            .info {
                display: flex;
                flex-direction: column;
                gap: .1rem;
                .name {
                font-size: 0.9rem;
                margin-bottom: 0.25rem;
                font-weight: 500;
                overflow: hidden;
                width: 9rem;
                text-overflow: ellipsis;
                white-space: nowrap;
                }
                .category {
                font-size: .7rem;
                color: #666666;
                }
                .rating {
                display: flex;
                align-items: center;
                font-size: 0.8rem;
                color: #F75867;
                .icon {
                    color: #666;
                    margin-left: 0.25rem;
                }
                }
            }
            .get {
                display: none;
                @media screen and (max-width: 768px) {
                    display: block;
                    border-radius: 1rem;
                    border: 1px solid #F78B17;
                    color: #F78B17;
                    padding: 0.2rem 1.2rem;
                }
            }
            @media screen and (max-width: 768px) {
                display: grid;
                grid-template-columns: auto 1fr auto;
            }
        }
    }
}
</style>
